<template>
	<view class="almost-lottery">
		<!-- 统计分析 -->
		<view class="charts-section">
			<view class="charts-box" @click="goMyDevices">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>

			<!-- 三个状态按钮（精致苹果风格） -->
			<view class="status-buttons">
				<view class="status-btn blue" @click="goLackWater(0)">
					<text class="value">{{homeInfo.count1}}</text>
					<text class="label">漏水报警</text>
				</view>
				<view class="status-btn orange" @click="goLackWater(1)">
					<text class="value">{{homeInfo.count2}}</text>
					<text class="label">离线</text>
				</view>
				<view class="status-btn gray" @click="goLackWater(2)">
					<text class="value">{{homeInfo.count3}}</text>
					<text class="label">性能报警</text>
				</view>
			</view>
			<view class="" style="height: 150rpx;position: relative;z-index: 9999;">
				<view class="tnwave waveAnimation">
					<view class="waveWrapperInner bgTop">
						<view class="wave waveTop"
							style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')">
						</view>
					</view>
					<view class="waveWrapperInner bgMiddle">
						<view class="wave waveMiddle"
							style="background-image: url('https://resource.tuniaokj.com/images/wave/wave-2.png')">
						</view>
					</view>
					<view class="waveWrapperInner bgBottom">
						<view class="wave waveBottom"
							style="background-image: url('https://resource.tuniaokj.co m/images/wave/wave-1.png')">
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部标题 -->
		<!-- 		<view class="header">
			<text class="title">功能中心</text>
		</view> -->

		<!-- 功能入口卡片 -->
		<view class="feature-wrap">
			<view class="feature-item" @click="handleScan">
				<image class="icon" src="/static/icons/scan.png" mode="aspectFit" />
				<text class="label">扫描二维码</text>
			</view>
			<view class="feature-item" @click="goMyDevices">
				<image class="icon" src="/static/icons/device.png" mode="aspectFit" />
				<text class="label">我的设备</text>
			</view>
			<view class="feature-item" @click="goMyFlow">
				<image class="icon" src="/static/icons/flow.png" mode="aspectFit" />
				<text class="label">我的流量</text>
			</view>
			<view class="feature-item" @click="goMyOrder">
				<image class="icon" src="/static/icons/order.png" mode="aspectFit" />
				<text class="label">我的订单</text>
			</view>
		</view>
		<view class="">
			<uni-swiper-dot :info="info" :current="currentSw" field="content" :mode="mode" :dots-styles="dotStyle">
				<swiper class="swiper-box" @change="changeSw">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image :src="item.image" style="border-radius: 20rpx;" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>


		<u-tabbar :value="current" @change="change1">
			<u-tabbar-item text="首页" activeColor="#0081ff" icon="home"></u-tabbar-item>
			<u-tabbar-item text="退出登陆" activeColor="#0081ff" icon="arrow-rightward"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		parseUrlParams
	} from '@/utils/common.js';
	import {
		deviceScIMEIApi,
		controlListApi,
		deviceHomeApi
	} from '@/api/index.js';
	import {
		clearStorageExcept
	} from '@/utils/storage.js'

	export default {
		name: 'Home',
		data() {
			return {
				homeInfo: {
					count: 0,
					count1: 0,
					count2: 0,
					count3: 0,
				},
				dotStyle: {
					backgroundColor: 'rgba(83, 200, 249,0.3)',
					border: '1px rgba(83, 200, 249,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 129, 255, 0.9)',
					selectedBorder: '1px rgba(0, 129, 255, 0.9) solid'
				},
				info: [{
					content: '内容 A',
					image: require('@/static/images/banner1.jpeg')
				}, {
					content: '内容 B',
					image: require('@/static/images/banner2.jpg')
				}],
				currentSw: 0,
				mode: 'round',
				progress: 50,
				current: 0,
				token: null,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#357ff7", "#ff9d45", "#72d288"],
					// color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					// 	"#ea7ccc"
					// ],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "台数",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "0",
						fontSize: 35,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				}
			}
		},
		onLoad() {
			const token = uni.getStorageSync('App-Token');
			this.token = token;
			if (token) {
				this.controlList();

			}
		},
		onReady() {
			// this.getServerData();

		},
		onShow() {

			const token = uni.getStorageSync('App-Token');
			this.token = token;
			if (!token) {
				uni.reLaunch({
					url: '/pages/login'
				})
			}
			this.deviceHome();
		},
		methods: {
			changeSw(e) {
				this.currentSw = e.detail.current
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "缺少",
								"value": 50
							}, {
								"name": "离线",
								"value": 30
							}, {
								"name": "性能报警",
								"value": 20
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			async controlList() {
				const res = await controlListApi();
				// console.log(res, 'list');
				if (res.code === 200) {
					if (res.rows && res.rows.length > 0) {
						const list = res.rows.map(item => item.appletCode);
						console.log(list, 'list--list');
						uni.setStorageSync('appletCodeList', [])
						uni.setStorageSync('appletCodeList', list)
					} else {
						uni.setStorageSync('appletCodeList', [])
					}
				} else {
					uni.setStorageSync('appletCodeList', [])
				}
			},
			// 首页统计
			async deviceHome() {
				const {
					data: res
				} = await deviceHomeApi({});
				console.log(res, '首页统计');
				this.homeInfo = res;
				let chartData = {
					series: [{
						data: [{
							"name": "缺少",
							"value": res.count1
						}, {
							"name": "离线",
							"value": res.count2
						}, {
							"name": "性能报警",
							"value": res.count3
						}]
					}]
				};
				this.opts.subtitle.name = res.count;
				this.chartData = JSON.parse(JSON.stringify(chartData));
			},
			// 切换
			change1(e) {
				this.current = e;
				if (e === 1) {
					clearStorageExcept(['username'])
					uni.reLaunch({
						url: '/pages/login'
					})
				}
			},
			// dianji
			click1() {},
			handleScan() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果：', res);
						if (res.errMsg === 'scanCode:ok') {
							const params = parseUrlParams(res.result);
							console.log(params);
							if (params.IMEI) {
								uni.navigateTo({
									url: '/pages/myDevices/codeDetail/codeDetail?IMEI=' + params
										.IMEI
								})
							}
						} else {
							uni.showToast({
								title: '请稍后重试',
								icon: 'none'
							})
						}

					}
				});
			},
			goMyDevices() {
				uni.navigateTo({
					url: '/pages/myDevices/myDevices'
				});
			},
			goMyFlow() {
				uni.navigateTo({
					url: '/pages/myFlow/myFlow'
				});
			},
			goMyOrder() {
				uni.navigateTo({
					url: '/pages/myOrder/myOrder'
				});
			},
			goLackWater(type) {
				const url = type === 0 ? '/pages/myDevices/myDevices?reserve1=1' : type === 1 ?
					'/pages/myDevices/myDevices?devicestate=0' : '/pages/myDevices/myDevices?reserve2=1'
				uni.navigateTo({
					url
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	// 苹果风整体基调：浅灰背景、圆润、留白大、无重色块、无强阴影
	.almost-lottery {
		min-height: 100vh;
		background-color: #f5f5f7;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.header {
		padding: 30rpx 0 0rpx;
		text-align: left;
	}

	.charts-box {
		width: 70%;
		height: 200px;
		margin: 0 auto;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #000;
	}

	.feature-wrap {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.feature-item {
		width: 24%;
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: opacity 0.2s;

		&:active {
			opacity: 0.7;
		}
	}

	// 这里建议图标用线性图标or苹果SF Symbol风格
	.icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 24rpx;
	}

	.label {
		font-size: 28rpx;
		color: #1c1c1e;
	}


	.charts-section {
		position: relative;
		margin-top: 30rpx;
		overflow: hidden;
		border-radius: 30rpx;
		background: linear-gradient(to bottom, #6cd1ff, #b4f1d8);
		padding-top: 40rpx;
		// padding-bottom: 120rpx;
	}

	.charts-box {
		width: 60%;
		height: 300rpx;
		margin: 0 auto;
		z-index: 2;
		position: relative;
	}

	.status-labels {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		z-index: 2;
		margin-top: 20rpx;

		.status-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.value {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
			}

			.label {
				font-size: 24rpx;
				color: #fff;
				margin-top: 6rpx;
			}

			&.blue .value {
				color: #2e8bff;
			}

			&.orange .value {
				color: #ff9d3f;
			}

			&.gray .value {
				color: #666;
			}
		}
	}


	.status-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		margin-top: 40rpx;

		.status-btn {
			flex: 1;
			margin: 0 15rpx;
			height: 120rpx;
			border-radius: 28rpx;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			transition: all 0.25s ease;
			box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.08);
			position: relative;
			overflow: hidden;

			// 轻微渐变光泽效果
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), transparent);
				opacity: 0.15;
			}

			&:active {
				transform: scale(0.97);
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.12);
			}

			.value {
				font-size: 40rpx;
				font-weight: 700;
				color: #fff;
				z-index: 1;
			}

			.label {
				font-size: 22rpx;
				margin-top: 8rpx;
				color: rgba(255, 255, 255, 0.85);
				z-index: 1;
			}

			&.blue {
				background: linear-gradient(145deg, #3a8bff, #256df1);
				box-shadow: 0 10rpx 20rpx rgba(37, 109, 241, 0.25);
			}

			&.orange {
				background: linear-gradient(145deg, #ffa94a, #ff7e29);
				box-shadow: 0 10rpx 20rpx rgba(255, 126, 41, 0.25);
			}

			&.gray {
				background: linear-gradient(145deg, #aef18a, #45bc83);
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
			}
		}
	}


	/* 波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		z-index: 9999;
		height: 200rpx;
		left: 0;
		right: 0;
		// top: 290rpx;
		bottom: 0;

	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}


	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff;
	}
</style>